<template>
	<view>
		<view class="header">
			<view class="cn">
				设备列表
			</view>
			<view class="en">
				Equipment List
			</view>
		</view>
		<view class="u-demo-block">
			<u-swiper :list="swiperList" imgMode="aspectFit" height="380" previousMargin="70" nextMargin="70" autoplay interval="3500"
				duration="1500" circular radius="10" bgColor="#f6f6f6" @click="swiperClick"></u-swiper>
		</view>
		
		<view class="equipment-list">
			<block v-for="(item, index) in equipmentList" :key="item.id">
				<view :class="item.class1" @click="change(index)" v-if="actives[index].active">
					<view class="image">
						<image :src="item.icon1" mode="" class="icon"></image>
						<image src="../../static/images/equipment/close.png" mode="" class="switch"></image>
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
				<view :class="item.class2" @click="change(index)" v-else>
					<view class="image">
						<image :src="item.icon2" mode="" class="icon"></image>
						<image src="../../static/images/equipment/open.png" mode="" class="switch"></image>
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
			</block>
			<block v-for="(item, index) in footerList" :key="item.id">
				<view :class="item.class1" @click="active(item.id, 1)" v-if="actives[item.id].active === 0">
					<view class="row">
						<view class="text">{{ item.name }}</view>
						<image :src="item.icon1" mode="" class="icon"></image>
					</view>
					<view class="process">
						<view class="circle">
							<view class="circle-active"></view>
							<view class=""></view>
							<view class=""></view>
						</view>
						<view class="state">
							<text>关闭</text>
							<text>停止</text>
							<text>开启</text>
						</view>
					</view>
				</view>
				<view :class="item.class2" @click="active(item.id, 2)" v-else-if="actives[item.id].active === 1">
					<view class="row">
						<view class="text">{{ item.name }}</view>
						<image :src="item.icon2" mode="" class="icon"></image>
					</view>
					<view class="process">
						<view class="inside">

						</view>
						<view class="circle">
							<view class=""></view>
							<view class="circle-active"></view>
							<view class=""></view>
						</view>
						<view class="state">
							<text>关闭</text>
							<text>停止</text>
							<text>开启</text>
						</view>
					</view>
				</view>
				<view :class="item.class3" @click="active(item.id, 0)" v-else>
					<view class="row">
						<view class="text">{{ item.name }}</view>
						<image :src="item.icon2" mode="" class="icon"></image>
					</view>
					<view class="process">
						<view class="inside">

						</view>
						<view class="circle">
							<view class=""></view>
							<view class=""></view>
							<view class="circle-active"></view>
						</view>
						<view class="state">
							<text>关闭</text>
							<text>停止</text>
							<text>开启</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		getMock2
	} from '../../request/getmock.js'
	import {
		getMock3
	} from '../../request/getmock.js'
	import {
		getMock4
	} from '../../request/getmock.js'
	export default {
		data() {
			return {
				actives: [{
					active: true
				}, {
					active: false
				}, {
					active: true
				}, {
					active: true
				}, {
					active: 0
				}, {
					active: 0
				}],
				swiperList: [
					'/static/images/equipment/swiper1.png',
					'/static/images/equipment/swiper2.png',
					'/static/images/equipment/swiper3.png'
				],
				equipmentList: [{
						id: 0,
						name: '喷淋设备',
						class1: 'equipment-item1',
						class2: 'active1',
						icon1: '../../static/images/equipment/equipment1.png',
						icon2: '../../static/images/equipment/equipment1-active.png',
						switch1: '../../static/images/equipment/close.png',
						switch2: '../../static/images/equipment/open.png'
					},
					{
						id: 1,
						name: '环流风机',
						class1: 'equipment-item2',
						class2: 'active2',
						icon1: '../../static/images/equipment/equipment2.png',
						icon2: '../../static/images/equipment/equipment2-active.png',
						switch1: '../../static/images/equipment/close.png',
						switch2: '../../static/images/equipment/open.png'
					},
					{
						id: 2,
						name: '照明设备',
						class1: 'equipment-item3',
						class2: 'active3',
						icon1: '../../static/images/equipment/equipment3.png',
						icon2: '../../static/images/equipment/equipment3-active.png',
						switch1: '../../static/images/equipment/close.png',
						switch2: '../../static/images/equipment/open.png'
					},
					{
						id: 3,
						name: '大鹏卷膜',
						class1: 'equipment-item4',
						class2: 'active4',
						icon1: '../../static/images/equipment/equipment4.png',
						icon2: '../../static/images/equipment/equipment4-active.png',
						switch1: '../../static/images/equipment/close.png',
						switch2: '../../static/images/equipment/open.png'
					}
				],
				footerList: [{
						id: 4,
						name: '遮阳设备',
						class1: 'footer-item5',
						class2: 'footer-active1',
						class3: 'footer-active1-ac2',
						icon1: '../../static/images/equipment/equipment5.png',
						icon2: '../../static/images/equipment/equipment5.png',
					},
					{
						id: 5,
						name: '驱鸟器',
						class1: 'footer-item6',
						class2: 'footer-active2',
						class3: 'footer-active1-ac2',
						icon1: '../../static/images/equipment/equipment6.png',
						icon2: '../../static/images/equipment/equipment6.png',
					}
				]
			};
		},
		onLoad() {},
		methods: {
			swiperClick(i){
				let no = i + 1
				uni.navigateTo({
					url: '/subpkg/monitor/monitor?no='+ no
				})
			},
			async change(index) {
				if(this.$store.state.userInfo.role==3){
					uni.$showMsg('权限不足,请申请', 'error')
					return;
				}
				this.actives[index].active = !this.actives[index].active
				if (!this.actives[index].active) {
					const {
						data: res
					} = await getMock2()
					console.log(res)
					if (res.code == 200) {
						uni.$showMsg('成功开启', 'success')
					}
				} else {
					const {
						data: res
					} = await getMock3()
					console.log(res)
					if (res.code == 200) {
						uni.$showMsg('成功关闭', 'success')
					}
				}
			},
			async active(id, val) {
				if(this.$store.state.userInfo.role==3){
					uni.$showMsg('权限不足,请申请', 'error')
					return;
				}
				this.actives[id].active = val
				if (val === 0) {
					const {
						data: res
					} = await getMock3()
					console.log(res)
					if (res.code == 200) {
						uni.$showMsg('成功关闭', 'success')
					}
				} else if (val === 1) {
					const {
						data: res
					} = await getMock4()
					console.log(res)
					if (res.code == 200) {
						uni.$showMsg('成功停止', 'success')
					}
				} else {
					const {
						data: res
					} = await getMock2()
					console.log(res)
					if (res.code == 200) {
						uni.$showMsg('成功开启', 'success')
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.header {
		height: 210rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		padding-top: 80rpx;
		padding-left: 25rpx;
		background-color: #67c3a8;
		margin-bottom: 20rpx;

		.cn {
			font-size: 50rpx;
			font-weight: 700;
			letter-spacing: 5rpx;
		}

		.en {
			font-size: 32rpx;
			margin-top: 5rpx;
		}
	}

	swiper {
		width: 100%;
		height: 380rpx;
		margin-bottom: 40rpx;

		.swiper-item {
			image {
				width: 750rpx;
				height: 380rpx;
			}
		}
	}

	.equipment-list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 0 10rpx;

		[class ^=equipment-item] {
			width: 335rpx;
			height: 190rpx;
			background-color: #FFFFFF;
			border-radius: 35rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 1px 1px 0 rgba(150, 150, 150, .2);
			padding: 40rpx 30rpx 0 30rpx;
			//感觉没变
			box-sizing: border-box;
			color: #82aabb;
			font-family: ele;
			font-size: 36rpx;
			letter-spacing: 3rpx;

			.image {
				display: flex;
				justify-content: space-between;

				.icon {
					width: 90rpx;
					height: 60rpx;
				}

				.switch {
					width: 85rpx;
					height: 40rpx;
					margin-top: 12rpx;
				}
			}

			.text {
				margin-top: 20rpx;
			}
		}

		.equipment-item2 {
			.icon {
				width: 60rpx !important;
				height: 60rpx !important;
			}
		}

		.equipment-item3 {
			.icon {
				width: 45rpx !important;
				height: 60rpx !important;
			}
		}

		.equipment-item4 {
			.icon {
				margin-top: 5rpx;
				width: 90rpx !important;
				height: 40rpx !important;
			}

			.text {
				margin-top: 28rpx;
			}
		}

		[class^=footer-item] {
			position: relative;
			width: 335rpx;
			height: 190rpx;
			background-color: #FFFFFF;
			border-radius: 35rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 1px 1px 0 rgba(150, 150, 150, .2);
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			color: #82aabb;
			font-family: ele;
			font-size: 36rpx;
			letter-spacing: 3rpx;

			.row {
				display: flex;
				justify-content: space-between;

				.icon {
					width: 55rpx;
					height: 55rpx;
				}
			}

			.process {
				position: absolute;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 85%;
				height: 6rpx;
				border-radius: 35rpx;
				background-color: #a7c6d8;

				.circle {
					display: flex;
					justify-content: space-between;
					width: 104%;
					margin-top: -8rpx;

					view {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #a7c6d8;

						&.circle-active {
							background-color: #124c8a;
						}
					}
				}

				.state {
					display: flex;
					justify-content: space-between;
					width: 110%;
					margin-left: -15rpx;
					margin-top: 5rpx;

					text {
						font-size: 18rpx;
						color: #b7c0ba;
					}
				}
			}
		}

		[class^=footer-active] {
			position: relative;
			width: 335rpx;
			height: 190rpx;
			background-color: #FFFFFF;
			border-radius: 35rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 1px 1px 0 rgba(150, 150, 150, .2);
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			color: #8aaebe;
			font-family: ele;
			font-size: 36rpx;
			letter-spacing: 3rpx;

			.row {
				display: flex;
				justify-content: space-between;

				.icon {
					width: 55rpx;
					height: 55rpx;
				}

				// .icon {
				// 	position: absolute;
				// 	top: -5rpx;
				// 	right: 8rpx;
				// 	width: 100rpx;
				// 	height: 100rpx;
				// }
			}

			.process {
				position: absolute;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 85%;
				height: 6rpx;
				border-radius: 35rpx;
				background-color: #a7c6d8;

				.circle {
					display: flex;
					justify-content: space-between;
					width: 104%;
					margin-top: -8rpx;

					view {
						position: relative;
						z-index: 999;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #a7c6d8;

						&:nth-child(1) {
							background-color: #a7c6d8;
						}

						&.circle-active {
							background-color: #124c8a;
						}
					}
				}

				.state {
					display: flex;
					justify-content: space-between;
					width: 110%;
					margin-left: -15rpx;
					margin-top: 5rpx;

					text {
						font-size: 18rpx;
						color: #b7c0ba;
					}
				}

				.inside {
					position: absolute;
					width: 50%;
					height: 6rpx;
					border-radius: 5rpx;
					background-color: #a7c6d8;
				}
			}
		}

		// [class^=footer-active2] {
		// 	.icon {
		// 		top: 10rpx!important;
		// 		right: 20rpx!important;
		// 		width: 70rpx!important;
		// 		height: 70rpx!important;
		// 	}
		// }
		.footer-active1-ac2 {
			position: relative;
			width: 335rpx;
			height: 190rpx;
			background-color: #dde7ef;
			border-radius: 35rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 1px 1px 0 rgba(150, 150, 150, .2);
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			color: #8aaebe;
			font-family: ele;
			font-size: 36rpx;
			letter-spacing: 3rpx;

			.row {
				display: flex;
				justify-content: space-between;

				.icon {
					width: 55rpx;
					height: 55rpx;
				}

				// .icon {
				// 	position: absolute;
				// 	top: -5rpx;
				// 	right: 8rpx;
				// 	width: 100rpx;
				// 	height: 100rpx;
				// }
			}

			.process {
				position: absolute;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 85%;
				height: 6rpx;
				border-radius: 35rpx;
				background-color: #a7c6d8;

				.circle {
					display: flex;
					justify-content: space-between;
					width: 104%;
					margin-top: -8rpx;

					view {
						position: relative;
						z-index: 999;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #a7c6d8;

						&:nth-child(1) {
							background-color: #a7c6d8;
						}

						&:nth-child(2) {
							background-color: #a7c6d8;
						}

						&.circle-active {
							background-color: #124c8a;
						}
					}
				}

				.state {
					display: flex;
					justify-content: space-between;
					width: 110%;
					margin-left: -15rpx;
					margin-top: 5rpx;

					text {
						font-size: 18rpx;
						color: #b7c0ba;
					}
				}

				.inside {
					position: absolute;
					width: 100%;
					height: 6rpx;
					border-radius: 5rpx;
					background-color: #a7c6d8;
				}
			}
		}
	}

	[class ^=active] {
		width: 335rpx;
		height: 190rpx;
		background-color: #94dfc9;
		border-radius: 35rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 1px 1px 0 rgba(150, 150, 150, .2);
		padding: 40rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		color: #FFFFFF;
		font-size: 36rpx;
		letter-spacing: 3rpx;

		.image {
			display: flex;
			justify-content: space-between;

			.icon {
				width: 90rpx;
				height: 60rpx;
			}

			.switch {
				width: 85rpx;
				height: 40rpx;
				margin-top: 12rpx;
			}
		}

		.text {
			margin-top: 20rpx;
		}
	}

	.active2 {
		.icon {
			width: 60rpx !important;
			height: 60rpx !important;
		}
	}

	.active3 {
		.icon {
			width: 75rpx !important;
			height: 75rpx !important;
			margin-left: -15rpx;
			margin-top: -8rpx;
		}

		.text {
			margin-top: 14rpx;
		}
	}

	.active4 {
		position: relative;

		.icon {
			width: 90rpx !important;
			height: 80rpx !important;
			margin-top: -20rpx;
		}

		.text {
			position: absolute;
			top: 97rpx;
			left: 30rpx;
		}
	}
</style>
